<template>
	<scroll-view
		class="history-list"
		scroll-y="true"
		enable-flex
		@scrolltolower="onscrolltolower">
		<view class="filter-box" @click="handlerClickFilter">
			<text>{{ taskTypeName }}</text>
			<image src="/static/filter.png" mode=""></image>
		</view>
		<!-- <uni-transition
			custom-class="transition task-type-selection"
			:mode-class="['fade', 'zoom-out']"
			:show="visible">
			<view
				v-for="(item,index) in taskTypeData"
				:key="index"
				:class="['type-item', item.code === taskType && 'is-active']"
				@click="handlerChangeFilter(item.code)">{{ item.label }}
			</view>
		</uni-transition> -->
		<view
			class="list-box"
			v-if="historyList.length">
			<view
				class="list-item"
				v-for="(item, index) in historyList"
				:key="index">
				<view class="date-box">
					<view class="week">
						<text class="day">{{ item.day }}</text>
						<text class="weekday">{{ item.weekday }}</text>
					</view>
					<view class="date">{{ item.year }}.{{ item.month }}</view>
					<view class="is_comment" v-if="item.comment"><view class="dot"></view>有回复</view>
				</view>
				<view
					class="item-container"
					@click="handlerClick('view', item)">
					<view class="special-info">
						<view class="content-box">
							<view class="title cut_font">{{ item.homeworkName }}</view>
							<view class="des cut_font">{{ item.homeworkDescription }}</view>
							<view class="time">{{ item.time }}</view>
						</view>
						<image v-if="item.preview" :src="item.preview" mode="aspectFill"></image>
					</view>
					<view class="operate-box">
						<view class="custom-title cut_font_2">{{ item.title }}</view>
						<view class="operate">
							<image
								src="../../static/delete-icon.png"
								mode=""
								@click.stop="handlerDelete(item)">
							</image>
							<image
								src="../../static/share-icon.png"
								mode=""
								@click.stop="handlerClick('share', item)">
							</image>
						</view>
					</view>
				</view>
			</view>
			<view class="loading-text">
				{{ loadingObject[loadStaus].text }}
			</view>
		</view>
		<view v-else class="empty-box">
			<image src="../../static/no_data.png" mode=""></image>
			<text class="text">暂无书写记录</text>
		</view>
		<!-- <uni-popup ref="popup" type="dialog">
			<view class="popup-content">
				<text>确定要删除本条书写记录？</text>
				<text>删除后将无法找回</text>
			</view>
			<view class="popup-operate-box">
				<button type="default" @click="handlerConfirm">确定</button>
				<button class="cancel" type="default" @click="$refs.popup.close()">取消</button>
			</view>
		</uni-popup> -->
	</scroll-view>
</template>

<script>

export default {
	name: 'mirroregoHistoryList',
	data () {
		return {
			historyList: [],
			taskTypeData: [
				{
					label: "全部任务",
					code: 1,
				},
				{
					label: "今日任务",
					code: 2,
				},
				{
					label: "一周内任务",
					code: 3,
				},
				{
					label: "一个月任务",
					code: 4,
				},
			],
			taskType: 1,
			visible: false,
			currentData: {},
			pageNo: 1,
			pageSize: 10,
			// 加载中: loading  已完成: finished 没有更多了: nomore
			loadStaus: 'loading',
			loadingObject: {
				loading: { text: '正在加载中...' },
				finished: { text: '上拉加载更多' },
				nomore: { text: '没有更多啦' },
			},
		};
	},
	computed: {
		taskTypeName() {
			return (this.taskTypeData.find(({ code }) => code === this.taskType)  || {}).label || '';
		},
	},
	methods: {
		getHistoryList() {
			const userInfo = uni.getStorageSync('userInfo') || '{}';
			const { userId } = JSON.parse(userInfo); 
			uni.showLoading({
				title: '加载中',
				mask: true,
			});
			this.loadStaus = 'loading';
			uni.$request({
				method: 'GET',
				url: 'app-api/homework/write/page',
				data: {
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					taskType: this.taskType,
					userId,
				},
				header: { 'tenant-id': 1 },
			}).then((res) => {
				this.historyList = (res?.data?.list || []).map(item => ({
					...item,
					...(this.getTimesByTimeStamp(item.createTime) || {}),
				}));
				this.loadStaus = res?.data?.total > this.pageSize ? 'finished' : 'nomore';
			}).finally(uni.hideLoading);
		},
		handlerClickFilter() {
			this.visible = true;
			uni.showActionSheet({
				itemList: this.taskTypeData.map(({ label }) => label),
				success: ({ tapIndex }) => {
					this.handlerChangeFilter(this.taskTypeData[tapIndex].code);
				},
				fail: () => {},
			});
		},
		handlerChangeFilter(code) {
			this.visible = false;
			this.taskType = code;
			this.pageSize = 10;
			this.getHistoryList();
		},
		handlerClick(type, data) {
			uni.navigateTo({
				url: `/pages/write/write-detail?type=${type}&detailId=${data.id}`,
			});
		},
		handlerDelete(data) {
			this.currentData = data;
			// this.$refs.popup.open();
			uni.showModal({
				title: '提示',
				content: '确定要删除本条书写记录?\n删除后将无法找回',
				cancelColor: '#FF8F1F',
				confirmColor: '#000000',
				success: ({ confirm }) => {
					if (confirm) this.handlerConfirm();
				},
			});
		},
		handlerConfirm() {
			// this.$refs.popup.close();
			uni.showLoading({
				title: '加载中',
				mask: true,
			});
			uni.$request({
				method: 'DELETE',
				url: `app-api/homework/write/delete?id=${this.currentData.id}`,
				header: { 'tenant-id': 1 },
			}).then(() => {
				this.getHistoryList();
				uni.showToast({
					duration: 2000,
					title: '删除成功',
				});
			}).catch(() => {
				uni.showToast({
					duration: 2000,
					title: '删除失败',
					icon: 'none',
				});
			}).finally(uni.hideLoading);
		},
		onscrolltolower() {
			if (this.loadStaus === 'finished') {
				this.pageSize += 10;
				this.getHistoryList();
			}
		},
		getTimesByTimeStamp(timeStamp) {
		   const date = new Date(timeStamp);
		   const format = s => `0${s || 0}`.slice(-2);
		   const year = date.getFullYear();
		   const month = format(date.getMonth() + 1);
		   const day = format(date.getDate());
		   const weekday = ({
			   0: '周日',
			   1: '周一',
			   2: '周二',
			   3: '周三',
			   4: '周四',
			   5: '周五',
			   6: '周六',
		   })[date.getDay()];
		   const time = `${format(date.getHours())}:${format(date.getMinutes())}`;
		   return { year, month, day, weekday, time };
		},
	},
	mounted() {
		this.getHistoryList();
		uni.$on('delete-success', () => {
			this.pageSize = 10;
			this.getHistoryList();
		});
	},
	
};
</script>

<style lang="scss">
.history-list {
	height: 100%;
	position: relative;
	font-family: PingFang SC;
	font-weight: 400;
	overflow-y: auto;
	.filter-box {
		font-size: 28rpx;
		font-weight: 400;
		color: #FE8151;
		line-height: 36rpx;
		display: flex;
		margin-bottom: 14rpx;
		text {
			margin-right: 10rpx;
		}
		image {
			width: 32rpx;
			height: 32rpx;
			margin: auto 0;
		}
	}
	.task-type-selection {
		position: absolute;
		top: 48rpx;
		left: 0;
		z-index: 2;
		background: #fff;
		padding: 20rpx 30rpx;
		box-shadow: 0 0 8px 0 rgba(232, 237, 250, .6), 0 2px 4px 0 rgba(232, 237, 250, .5);
		.type-item {
			border-bottom: 1rpx solid #e6e6e6;
			padding: 20rpx 0;
			color: #333;
			font-size: 26rpx;
			&.is-active {
				color: #FE8151;
				border-color: #FE8151;
			}
			&:nth-last-child(1) {
				border-bottom: 0;
			}
		}
	}
	.list-box {
		padding-top: 10rpx;
		padding-bottom: 50rpx;
		.list-item {
			box-sizing: border-box;
			width: 100%;
			margin: 32rpx 0;
			display: flex;
			.date-box {
				width: 130rpx;
				min-width: 130rpx;
				margin: auto 0;
				color: #303030;
				font-size: 24rpx;
				.week {
					.day {
						font-size: 32rpx;
						margin-right: 10rpx;
					}
					.weekday {
						
					}
				}
				.date {
					margin-top: 10rpx;
				}
				.is_comment {
					font-size: 22rpx;
					font-family: PingFang SC-常规体, PingFang SC;
					font-weight: normal;
					color: #ABB3BB;
					margin-top: 16rpx;
					.dot {
						width: 18rpx;
						height: 18rpx;
						background: #FB7D57;
						border-radius: 50%;
						display: inline-block;
						margin: auto 0;
						margin-right: 6rpx;
					}
				}
			}
			.item-container {
				width: calc(100% - 130rpx);
				border-radius: 16rpx;
				background: #fff;
				padding: 17rpx;
				padding-bottom: 20rpx;
				box-sizing: border-box;
				.special-info {
					display: flex;
					.content-box {
						flex: 1 1 auto;
						max-width: 100%;
						width: calc(100% - 136rpx);
						.title {
							font-size: 32rpx;
							color: #303030;
							line-height: 48rpx
						}
						.des {
							font-size: 26rpx;
							color: #666;
							line-height: 42rpx;
							margin: 8rpx 0 4rpx 0;
						}
						.time {
							font-size: 24rpx;
							color: #ABB3BB;
							line-height: 40rpx;
						}
					}
					image {
						width: 136rpx;
						height: 136rpx;
						margin-left: 15rpx;
						border-radius: 16rpx;
					}
				}
				.operate-box {
					margin-top: 20rpx;
					.custom-title {
						font-size: 24rpx;
						color: #666666;
						line-height: 36rpx
					}
					.operate {
						display: flex;
						justify-content: flex-end;
						image {
							width: 32rpx;
							height: 32rpx;
							margin: auto 18rpx;
							margin-right: 0;
						}
					}
				}
			}
		}
		.loading-text {
			color: #999;
			font-size: 12rpx;
			text-align: center;
			margin: 10px 0;
			width: 100%;
		}
	}
	.empty-box {
		display: flex;
		flex-direction: column;
		image {
			width: 170rpx;
			height: 167rpx;
			margin: 270rpx auto 0 auto;
		}
		.text {
			font-size: 30rpx;
			font-weight: 300;
			color: #666666;
			margin: 50rpx auto;
		}
	}
	.popup-content {
		background: #fff;
		width: 560rpx;
		height: 192rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		border-radius: 21rpx 21rpx 0 0;
		text {
			margin: 5rpx auto;
		}
	}
	.popup-operate-box {
		display: flex;
		button {
			width: 50%;
			border: 0;
			border-radius: 0;
			font-size: 32rpx;
			border-radius: 0 0 0 21rpx;
			background: #fff;
			border-top: 1px solid #eee;
			&::after {
				display: none;
			}
			&.cancel {
				color: #FF8F1F;
				border-radius: 0 0 21rpx 0;
				border-left: 1px solid #eee;
			}
		}
	}
}
</style>
